<template>
    <div class="product-detail-container">
      <el-button type="text" icon="el-icon-arrow-left" @click="$router.go(-1)">
        返回
      </el-button>
      
      <div class="product-main">
        <!-- 商品图片展示 -->
        <div class="product-gallery">
          <el-image 
            :src="product.image" 
            :preview-src-list="[product.image]"
            fit="cover"
          ></el-image>
        </div>
        
        <!-- 商品信息 -->
        <div class="product-info">
          <h1>{{ product.name }}</h1>
          <p class="product-subtitle">{{ product.description }}</p>
          
          <div class="price-section">
            <span class="current-price">￥{{ product.price }}</span>
            <span class="original-price" v-if="product.originalPrice">
              ¥{{ product.originalPrice }}
            </span>
            <el-tag v-if="product.originalPrice" type="danger">
              省￥{{ (product.originalPrice - product.price).toFixed(2) }}
            </el-tag>
          </div>
          
          <div class="product-meta">
            <p><span class="label">库存：</span>{{ product.count || 999 }}件</p>
            <p><span class="label">销量：</span>{{ product.saleCount || 0 }}件</p>
          </div>
          
          <el-divider></el-divider>
          
          <div class="product-actions">
            <el-input-number 
              v-model="quantity" 
              :min="1" 
              :max="product.stock || 99"
            ></el-input-number>
            <el-button 
              type="danger" 
              icon="el-icon-shopping-cart" 
              @click="addToCart"
            >
              加入购物车
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 商品详情 -->
      <div class="product-description">
        <h2>商品详情</h2>
        <div v-html="product.detail || product.description"></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        product: {},
        quantity: 1
      }
    },
    created() {
      // 初始化商品数据
      this.product = this.$route.query.product || {};
      
      // 如果刷新页面导致数据丢失，可以从接口重新获取
    //   if (!this.product.id && this.$route.query.id) {
    //     this.fetchProductDetail(this.$route.query.id);
    //   }
    },
    methods: {
    //   async fetchProductDetail(id) {
    //     try {
    //       const res = await this.$axios.get(`/api/product/detail?id=${id}`);
    //       if (res.data.code === 200) {
    //         this.product = res.data.data;
    //       }
    //     } catch (error) {
    //       console.error('获取商品详情失败:', error);
    //     }
    //   },
      addToCart() {
        // 加入购物车逻辑
        this.$message.success('已加入购物车');
      }
    }
  }
  </script>

<style scoped>
.product-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.product-main {
  display: flex;
  margin-top: 20px;
}

.product-gallery {
  width: 50%;
  padding: 20px;
}

.product-info {
  width: 50%;
  padding: 20px;
}

.price-section {
  margin: 20px 0;
}

.current-price {
  font-size: 28px;
  color: #f56c6c;
  margin-right: 15px;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
  margin-right: 15px;
}

.product-meta {
  color: #666;
  margin: 15px 0;
}

.product-meta .label {
  color: #333;
  width: 60px;
  display: inline-block;
}

.product-actions {
  margin-top: 30px;
}

.product-actions .el-button {
  margin-left: 20px;
}

.product-description {
  margin-top: 40px;
  padding: 20px;
  border-top: 1px solid #eee;
}
</style>